<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>读取测试</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <header th:replace="header.html"></header>
</head>
<body class="layui-layout-body">
    <div class="layui-body" style="margin:60px 0 0 10px ">
        <h1> QPS </h1>


        <div class="layui-form-item">


            <div class="layui-col-xs3">
                <div class="div_2">
                    <h2>MySQL </h2>
                    <table class="layui-hide" id="test1" lay-filter='test1'></table>

                </div>

            </div>

            <div class="layui-col-xs3">
                <div class="div_2">
                    <h2>MongoDB </h2>
                    <table class="layui-hide" id="test2" lay-filter='test2'></table>

                </div>
            </div>

        </div>


        <div class="layui-form-item">


            <div class="layui-col-xs3">
                <div class="div_2">
                    <h2>MySQL </h2>
                    <table class="layui-hide" id="test3" lay-filter='test3'></table>

                </div>

            </div>

            <div class="layui-col-xs3">
                <div class="div_2">
                    <h2>MongoDB </h2>
                    <table class="layui-hide" id="test4" lay-filter='test4'></table>

                </div>
            </div>

        </div>

    </div>
</body>

<style>

    .div_2{
        border: 2px solid #F0F0F0; /* 边框：2像素宽，实线，颜色为深灰色 */
        background-color: #F8F8F8; /* 背景色为淡灰色 */
        padding: 20px; /* 内边距为20像素，使内容远离边框 */
        width: 90%;
    }

</style>

<script type="text/javascript">
    layui.use(function () {
        var laytpl = layui.laytpl;
        var $ = layui.$;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;

        table.render({
            elem: '#test1',
            totalRow: true,

            cols: [
                [
                    {type: "numbers", fixed: 'aa'}

                    , {field: 'number', title: '样本数', width: 100}
                    , {field: 'time_consume', title: '耗时/s', width: 100}
                    , {field: 'qps', title: 'qps', width: 100}

                ]
            ],
            data:[
                {
                    "number": "1w",
                    "time_consume": 5.646,
                    "qps": 1771.1
                },
                {
                    "number": "10w",
                    "time_consume": 22.003,
                    "qps": 4544.8
                },
                {
                    "number": "30w",
                    "time_consume": 37.893,
                    "qps": 7917.0
                },
                {
                    "number": "100w",
                    "time_consume": 242.742,
                    "qps": 4119.6
                },
                {
                    "number": "200w",
                    "time_consume": 292.446,
                    "qps": 6838.8
                }
            ],
            page: true , // 分页
            elem: '#test1',
            limit:10,
            parseData: function (res) {  // 分页效果必须要加这个函数只加 page:true 不起作用。
                var result;
                console.log(this);
                console.log(JSON.stringify(res));
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {"code": res.code, "msg": res.msg, "count": res.data.length, "data": result};
            }

        });

        table.render({
            elem: '#test2',
            totalRow: true,

            cols: [
                [
                      {type: "numbers", fixed: 'aa'}
                    , {field: 'number', title: '样本数', width: 100}
                    , {field: 'time_consume', title: '耗时/s', width: 100}
                    , {field: 'qps', title: 'qps', width: 100}

                ]
            ],
            data:[
                {
                    "number": "1w",
                    "time_consume": 2.709,
                    "qps": 3691.3
                },
                {
                    "number": "10w",
                    "time_consume": 14.415,
                    "qps": 6937.2
                },
                {
                    "number": "30w",
                    "time_consume": 30.389,
                    "qps": 9871.9
                },
                {
                    "number": "100w",
                    "time_consume": 75.321,
                    "qps": 13276.5
                },
                {
                    "number": "200w",
                    "time_consume": 110.015,
                    "qps": 18179.3
                }
            ],
            page: true , // 分页
            elem: '#test2',
            limit:10,
            parseData: function (res) {  // 分页效果必须要加这个函数只加 page:true 不起作用。
                var result;
                console.log(this);
                console.log(JSON.stringify(res));
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {"code": res.code, "msg": res.msg, "count": res.data.length, "data": result};
            }

        });

        table.render({
            elem: '#test3',
            totalRow: true,

            cols: [
                [
                    {type: "numbers", fixed: 'aa'}

                    , {field: 'number', title: '样本数', width: 100}
                    , {field: 'time_consume', title: '耗时/s', width: 100}
                    , {field: 'qps', title: 'qps', width: 100}

                ]
            ],
            data:[
                {
                    "number": "1w",
                    "time_consume": 0.393,
                    "qps": 25445.2
                },
                {
                    "number": "10w",
                    "time_consume": 2.261,
                    "qps": 44228.2
                },
                {
                    "number": "30w",
                    "time_consume": 8.515,
                    "qps": 35231.9
                },
                {
                    "number": "100w",
                    "time_consume": 28.846,
                    "qps": 34666.8
                },
                {
                    "number": "200w",
                    "time_consume": 67.975,
                    "qps": 29422.5
                }
            ],
            page: true , // 分页
            elem: '#test3',
            limit:10,
            parseData: function (res) {  // 分页效果必须要加这个函数只加 page:true 不起作用。
                var result;
                console.log(this);
                console.log(JSON.stringify(res));
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {"code": res.code, "msg": res.msg, "count": res.data.length, "data": result};
            }

        });

        table.render({
            elem: '#test4',
            totalRow: true,

            cols: [
                [
                    {type: "numbers", fixed: 'aa'}
                    , {field: 'number', title: '样本数', width: 100}
                    , {field: 'time_consume', title: '耗时/s', width: 100}
                    , {field: 'qps', title: 'qps', width: 100}

                ]
            ],
            data:[
                {
                    "number": "1w",
                    "time_consume": 0.395,
                    "qps": 25316.4
                },
                {
                    "number": "10w",
                    "time_consume": 2.941,
                    "qps": 34002.0
                },
                {
                    "number": "30w",
                    "time_consume": 8.965,
                    "qps": 33463.4
                },
                {
                    "number": "100w",
                    "time_consume": 30.998,
                    "qps": 32260.1
                },
                {
                    "number": "200w",
                    "time_consume": 65.212,
                    "qps": 30669.2
                }
            ],
            page: true , // 分页
            elem: '#test4',
            limit:10,
            parseData: function (res) {  // 分页效果必须要加这个函数只加 page:true 不起作用。
                var result;
                console.log(this);
                console.log(JSON.stringify(res));
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {"code": res.code, "msg": res.msg, "count": res.data.length, "data": result};
            }

        });



    });

</script>

</html>